<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>登录</title>
    <link rel="stylesheet" href="../static/lib/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="../static/lib/layui/css/login.css" media="all" />
    <style>
        /* 覆盖原框架样式 */
        .layui-elem-quote {
            background-color: inherit !important;
        }

        .layui-input,
        .layui-select,
        .layui-textarea {
            background-color: inherit;
            padding-left: 30px;
        }
    </style>
</head>

<body>
    <!-- Head -->
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
 
			<div class="layui-col-sm12 layui-col-md10 zyl_mar_01">
				<img src="../static/images/four.png" width="270" height="100" class="head-img"> <span></span>
			</div>
            <div style="line-height: 130px" class="layui-col-sm12 layui-col-md2">
                <a href="admin_login.html">管理员登录</a>
            </div>

        </div>
    </div>
    <!-- Head End -->

    <!-- Carousel -->
    <div class="layui-row">
        <div class="layui-col-sm12 layui-col-md12">
            <div class="layui-carousel zyl_login_height" id="zyllogin" lay-filter="zyllogin">
                <div carousel-item="">
                    <div>
                        <div class="zyl_login_cont"></div>
                    </div>
                    <div>
                        <img src="../static/images/carousel/01.jpg" />
                    </div>
                    <div>
                        <div class="background">
                            <span></span><span></span><span></span>
                            <span></span><span></span><span></span>
                            <span></span><span></span><span></span>
                            <span></span><span></span><span></span>
                        </div>
                    </div>
                    <div>
                        <img src="../static/images/carousel/03.jpg" />
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Carousel End -->

    <!-- Footer -->
    <div class="layui-row">
        <div class="layui-col-sm12 layui-col-md12 zyl_center zyl_mar_01">

        </div>
    </div>
    <!-- Footer End -->



    <!-- LoginForm -->
    <div class="zyl_lofo_main">
        <fieldset class="layui-elem-field layui-field-title zyl_mar_02">
            <legend>欢迎登录 - 稻草人</legend>
        </fieldset>
        <div class="layui-row layui-col-space15">
            <form class="layui-form zyl_pad_01" action="">
                <div class="layui-col-sm12 layui-col-md12">
                    <div class="layui-form-item">
                        <input type="text" id="user" name="username" lay-verify="required|userName" autocomplete="off"
                            placeholder="账号" class="layui-input">
                        <i class="layui-icon layui-icon-username zyl_lofo_icon"></i>
                    </div>
                </div>
                <div class="layui-col-sm12 layui-col-md12">
                    <div class="layui-form-item">
                        <input type="password" id="pass" name="password" lay-verify="required|pass" autocomplete="off"
                            placeholder="密码" class="layui-input">
                        <i class="layui-icon layui-icon-password zyl_lofo_icon"></i>
                    </div>
                </div>
                <div class="layui-col-sm12 layui-col-md12">
                    <div class="layui-row" style="display: flex;">
                        <div class="layui-col-xs4 layui-col-sm4 layui-col-md4" style="line-height: 36px;"><a
                                href="user_register.html">免费注册</a></div>
                    </div>
                </div>
                <div class="layui-col-sm12 layui-col-md12">
                    <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="login_btn">立即登录</button>
                </div>
            </form>
        </div>

        <div style="height: 50px; display:flex;margin: 30px auto; justify-content: center;">
            <img width="30px" style="margin: 10px" src="../static/images/qq.png">
            <img width="30px" style="margin: 10px" src="../static/images/wechat.png">
            <img width="30px" style="margin: 10px" src="../static/images/weibo.png">
            <h4 style="line-height: 50px;">快速登录</h4>
        </div>
    </div>

    <!-- LoginForm End -->

    <!-- Footer -->
    <div class="layui-row" style="line-height: 80px;">
        <div class="layui-col-sm12 layui-col-md12 zyl_center zyl_mar_01">
            © 2021 - 稻草人病虫害检测 || airticket.com版权所有
        </div>
    </div>
    <!-- Footer End -->
    <!-- Jquery Js -->
    <script type="text/javascript" src="../static/js/jquery.min.js"></script>
    <!-- Layui Js -->
    <script type="text/javascript" src="../static/lib/layui/layui.js"></script>
    <!-- Jqarticle Js -->
    <script type="text/javascript" src="../static/assembly/jqarticle/jparticle.min.js"></script>
    <!-- ZylVerificationCode Js-->
    <script type="text/javascript" src="../static/assembly/zylVerificationCode/zylVerificationCode.js"></script>
    <script>
        layui.use(['carousel', 'form'], function () {
            var carousel = layui.carousel
                , form = layui.form;

            // //自定义验证规则
            // form.verify({
            //     // userName: function (value) {
            //     // 	if (value.length < 5) {
            //     // 		return '账号至少得5个字符';
            //     // 	}
            //     // }
            //     // , pass: [/^[\S]{6,12}$/, '密码必须6到12位，且不能出现空格']
            //     vercodes: function (value) {
            //         //获取验证码
            //         var zylVerCode = $(".zylVerCode").html();
            //         if (value != zylVerCode) {
            //             return '验证码错误（不区分大小写）';
            //         }
            //     }
            //     //页面发送请求跳转
            //     , content: function (value) {
            //         layedit.sync(editIndex);
            //     }
            // });

            //监听提交
            form.on('submit(login_btn)', function (data) {

					layer.msg("登录成功",{icon:1})
					
					setTimeout(function(){
					
					　　window.location.href="main.html";  //可以是一句或是很多句代码，也可以是个函数
					
					　　},3000);　
             /*   var jsonstr = { "username": data.field.username, "password": data.field.password };
                $.ajax({
                    url: "http://localhost:8181/user/login",
                    type: "POST",
                    contentType: "application/json",
                    dataType: "json",
                    data: JSON.stringify(jsonstr),
                    success: function (result) {
                        console.log(result)
                        if (result == true) {
                            //页面跳转
                            window.location.href = "/index";
                        }
                        else {
                            layer.msg("用户名或密码错误，请重新输入", { icon: 2 })
                        }
                    }
                })*/
                return false;
            });


            //设置轮播主体高度
            var zyl_login_height = $(window).height() / 1.3;
            var zyl_car_height = $(".zyl_login_height").css("cssText", "height:" + zyl_login_height + "px!important");


            //Login轮播主体
            carousel.render({
                elem: '#zyllogin'//指向容器选择器
                , width: '100%' //设置容器宽度
                , height: 'zyl_car_height'
                , arrow: 'always' //始终显示箭头
                , anim: 'fade' //切换动画方式
                , autoplay: true //是否自动切换false true
                , arrow: 'hover' //切换箭头默认显示状态||不显示：none||悬停显示：hover||始终显示：always
                , indicator: 'none' //指示器位置||外部：outside||内部：inside||不显示：none
                , interval: '5000' //自动切换时间:单位：ms（毫秒）
            });

            //监听轮播--案例暂未使用
            carousel.on('change(zyllogin)', function (obj) {
                var loginCarousel = obj.index;
            });

            //粒子线条
            $(".zyl_login_cont").jParticle({
                background: "rgba(0,0,0,0)",//背景颜色
                color: "#fff",//粒子和连线的颜色
                particlesNumber: 100,//粒子数量
                //disableLinks:true,//禁止粒子间连线
                //disableMouse:true,//禁止粒子间连线(鼠标)
                particle: {
                    minSize: 1,//最小粒子
                    maxSize: 3,//最大粒子
                    speed: 30,//粒子的动画速度
                }
            });

        });

    </script>
</body>

</html>